<template>
  <div class="partners">
    <div class="bg-dark text-white font-sans">
      <!-- 进度条 -->
      <div class="fixed top-0 left-0 w-full z-50 pointer-events-none">
        <div class="progress-line" :style="{ width: progress + '%' }"></div>
      </div>

      <!-- Hero区域 -->
      <section class="relative pt-24 pb-16 bg-darker overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-darker to-dark opacity-50"></div>

        <!-- 装饰元素 -->
        <div class="absolute -top-20 -right-20 w-96 h-96 bg-primary/10 rounded-full blur-3xl"></div>
        <div class="absolute -bottom-40 -left-20 w-96 h-96 bg-secondary/10 rounded-full blur-3xl"></div>

        <div class="container mx-auto px-4 relative z-10">
          <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
              我们的<span class="text-primary">合作伙伴</span>
            </h1>
            <p class="text-gray-400 text-lg max-w-2xl mx-auto">
              狂速科技SAAS与众多优秀企业建立了长期稳定的合作关系，共同推动行业发展。
            </p>
          </div>
        </div>
      </section>

      <!-- 合作伙伴介绍 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">战略<span class="text-primary">合作伙伴</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              我们与行业内领先的企业携手合作，共同探索创新解决方案，为客户提供更优质的服务。
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- 合作伙伴1 -->
            <div class="bg-card rounded-xl p-8 hover-lift" v-for="(partner, index) in strategicPartners" :key="index">
              <img :src="partner.logo" :alt="partner.name + ' logo'" class="w-48 h-auto mx-auto mb-6">
              <h3 class="text-xl font-bold mb-4">{{ partner.name }}</h3>
              <p class="text-gray-400 mb-6">{{ partner.description }}</p>
              <a :href="partner.link" class="inline-flex items-center text-primary font-medium hover:underline">
                了解更多 <i class="fa fa-arrow-right ml-2"></i>
              </a>
            </div>
          </div>
        </div>
      </section>

      <!-- 生态合作伙伴 -->
      <section class="py-20 bg-darker">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">生态<span class="text-primary">合作伙伴</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              我们与众多生态合作伙伴紧密合作，共同构建完善的SAAS生态系统，为客户提供全方位的服务。
            </p>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            <div class="bg-card rounded-xl p-6 hover-lift flex flex-col items-center justify-center" v-for="(ecoPartner, index) in ecoPartners" :key="index">
              <img :src="ecoPartner.logo" :alt="ecoPartner.name + ' logo'" class="w-36 h-auto mb-4">
              <h4 class="text-lg font-medium text-center">{{ ecoPartner.name }}</h4>
            </div>
          </div>
        </div>
      </section>

      <!-- 合作优势 -->
      <section class="py-20 bg-dark">
        <div class="container mx-auto px-4">
          <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">与我们合作的<span class="text-primary">优势</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              选择与狂速科技SAAS合作，您将获得以下优势，共同开启成功之路。
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="bg-card rounded-xl p-8 hover-lift" v-for="(advantage, index) in advantages" :key="index">
              <div class="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center text-primary text-2xl mb-6">
                <i :class="advantage.icon"></i>
              </div>
              <h3 class="text-xl font-bold mb-4">{{ advantage.title }}</h3>
              <p class="text-gray-400">{{ advantage.description }}</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 成为合作伙伴 -->
      <section class="py-20 bg-darker" id="become-partner">
        <div class="container mx-auto px-4">
          <div class="text-center mb-12">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">成为我们的<span class="text-primary">合作伙伴</span></h2>
            <p class="text-gray-400 max-w-2xl mx-auto">
              如果您对与狂速科技SAAS合作感兴趣，欢迎随时联系我们，我们将为您提供详细的合作方案。
            </p>
          </div>

          <div class="max-w-3xl mx-auto bg-card rounded-xl p-8 hover-lift">
            <form @submit.prevent="submitPartnerForm">
              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label for="company-name" class="block text-sm font-medium mb-2">公司名称</label>
                  <input type="text" id="company-name" v-model="formData.companyName" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入您的公司名称" required>
                </div>

                <div>
                  <label for="contact-person" class="block text-sm font-medium mb-2">联系人姓名</label>
                  <input type="text" id="contact-person" v-model="formData.contactPerson" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入联系人姓名" required>
                </div>
              </div>

              <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                <div>
                  <label for="phone" class="block text-sm font-medium mb-2">联系电话</label>
                  <input type="tel" id="phone" v-model="formData.phone" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入联系电话" required>
                </div>

                <div>
                  <label for="email" class="block text-sm font-medium mb-2">电子邮箱</label>
                  <input type="email" id="email" v-model="formData.email" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary" placeholder="请输入电子邮箱" required>
                </div>
              </div>

              <div class="mb-6">
                <label for="cooperation-intention" class="block text-sm font-medium mb-2">合作意向</label>
                <textarea id="cooperation-intention" v-model="formData.cooperationIntention" rows="5" class="w-full bg-darker border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:border-primary resize-none" placeholder="请简要描述您的合作意向"></textarea>
              </div>

              <div class="text-center">
                <button type="submit" class="px-8 py-3 bg-gradient-blue rounded-lg font-medium hover:shadow-lg transition-all hover:shadow-primary/20">
                  提交申请
                </button>
              </div>
            </form>
          </div>
        </div>
      </section>
    </div>
    </div>
  </template>

  <script>
  // 原文件第10 - 25行的 Tailwind 配置
const tailwindConfig = {
  theme: {
    extend: {
      colors: {
        primary: '#48b6ff',
        secondary: '#2e6cf1',
        dark: '#080812',
        darker: '#04040a',
        card: '#1a1a31'
      },
      fontFamily: {
        sans: ['Segoe UI', 'sans-serif'],
      },
    }
  }
};

// 初始化 Tailwind 配置
if (typeof window !== 'undefined' && window.tailwind) {
  window.tailwind.config = tailwindConfig;
}
  export default {
    name: 'PartnersView',
    data() {
      return {
        isMobileMenuOpen: false,
        progress: 0,
        strategicPartners: [
          {
            name: '科技巨头A',
            logo: 'https://picsum.photos/200/100?random=101',
            description: '科技巨头A是全球知名的科技公司，在云计算、人工智能等领域拥有领先技术。我们与A公司合作，共同开发基于云计算的SAAS解决方案。',
            link: '#'
          },
          {
            name: '行业先锋B',
            logo: 'https://picsum.photos/200/100?random=102',
            description: '行业先锋B在电商领域具有深厚的积累和丰富的经验。我们与B公司合作，将其电商解决方案与我们的SAAS平台深度融合，为电商客户提供一站式服务。',
            link: '#'
          },
          {
            name: '创新企业C',
            logo: 'https://picsum.photos/200/100?random=103',
            description: '创新企业C专注于大数据分析和营销技术。我们与C公司合作，为客户提供精准的数据分析和营销解决方案，帮助企业提升运营效率和市场竞争力。',
            link: '#'
          }
        ],
        ecoPartners: [
          { name: '支付服务商D', logo: 'https://picsum.photos/150/80?random=201' },
          { name: '物流供应商E', logo: 'https://picsum.photos/150/80?random=202' },
          { name: '云存储服务商F', logo: 'https://picsum.photos/150/80?random=203' },
          { name: '短信服务商G', logo: 'https://picsum.photos/150/80?random=204' },
          { name: '邮件服务商H', logo: 'https://picsum.photos/150/80?random=205' },
          { name: '营销推广服务商I', logo: 'https://picsum.photos/150/80?random=206' },
          { name: '客服系统提供商J', logo: 'https://picsum.photos/150/80?random=207' },
          { name: '数据分析服务商K', logo: 'https://picsum.photos/150/80?random=208' }
        ],
        advantages: [
          {
            title: '创新驱动',
            icon: 'fa fa-rocket',
            description: '我们拥有强大的研发团队，不断推出创新的SAAS解决方案，帮助您在市场竞争中脱颖而出。'
          },
          {
            title: '客户资源',
            icon: 'fa fa-users',
            description: '狂速科技SAAS积累了大量的优质客户资源，与我们合作，您将有机会接触到更广泛的客户群体。'
          },
          {
            title: '合作模式灵活',
            icon: 'fa fa-handshake-o',
            description: '我们提供多种合作模式，根据您的需求和业务特点，为您量身定制合作方案。'
          },
          {
            title: '安全可靠',
            icon: 'fa fa-shield',
            description: '我们高度重视数据安全和系统稳定性，采用先进的安全技术和措施，保障您的业务安全运行。'
          },
          {
            title: '专业支持',
            icon: 'fa fa-support',
            description: '我们拥有专业的技术支持团队，为您提供及时、高效的技术支持和售后服务。'
          },
          {
            title: '共赢发展',
            icon: 'fa fa-line-chart',
            description: '我们秉承共赢的合作理念，与合作伙伴共同成长，实现互利共赢的发展目标。'
          }
        ],
        formData: {
          companyName: '',
          contactPerson: '',
          phone: '',
          email: '',
          cooperationIntention: ''
        }
      };
    },
    mounted() {
      window.addEventListener('scroll', this.updateProgress);
    },
    beforeUnmount() {
      window.removeEventListener('scroll', this.updateProgress);
    },
    methods: {
      toggleMobileMenu() {
        this.isMobileMenuOpen = !this.isMobileMenuOpen;
      },
      updateProgress() {
        const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        this.progress = (winScroll / height) * 100;
      },
      submitPartnerForm() {
        // 这里可以添加表单提交逻辑，例如发送请求到后端
        console.log('表单提交数据:', this.formData);
        // 提交成功后清空表单
        this.formData = {
          companyName: '',
          contactPerson: '',
          phone: '',
          email: '',
          cooperationIntention: ''
        };
      }
    }
  };
  </script>

  <style scoped>
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
    .text-shadow {
      text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
    .bg-gradient-blue {
      background: linear-gradient(135deg, #48b6ff, #2e6cf1);
    }
    .hover-lift {
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .hover-lift:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(72, 182, 255, 0.1);
    }
    .card-glow {
      box-shadow: 0 0 15px rgba(72, 182, 255, 0.1);
    }
    .animate-float {
      animation: float 6s ease-in-out infinite;
    }
    @keyframes float {
      0% { transform: translateY(0px); }
      50% { transform: translateY(-15px); }
      100% { transform: translateY(0px); }
    }
    .animate-pulse-slow {
      animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
  }

  :root {
    --primary: #48b6ff;
    --secondary: #2e6cf1;
    --dark: #080812;
    --darker: #04040a;
    --card: #1a1a31;
  }

  body {
    background-color: var(--dark);
    color: white;
    font-family: 'Segoe UI', sans-serif;
  }

  /* 可以添加其他样式 */
  </style>
